<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">

        /*
         * 定义一个函数，专门用来为指定元素绑定单击响应函数
         * 	参数：
         * 		idStr 要绑定单击响应函数的对象的id属性值
         * 		fun 事件的回调函数，当单击元素时，该函数将会被触发
         */
        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }

        window.onload = function () {

            //为id为btn01的按钮绑定一个单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //查找#bj节点
                var bj = document.getElementById("bj");
                //打印bj
                //innerHTML 通过这个属性可以获取到元素内部的html代码
                alert(bj.innerHTML);
            };


            //为id为btn02的按钮绑定一个单击响应函数
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                //查找所有li节点
                //getElementsByTagName()可以根据标签名来获取一组元素节点对象
                //这个方法会给返回一个类数组对象，所有查询到的元素都会封装到对象中
                //即使查询到的元素只有一个，也会封装到数组中返回
                var lis = document.getElementsByTagName("li");

                //打印lis
                //alert(lis.length);

                //变量lis
                for (var i = 0; i < lis.length; i++) {
                    alert(lis[i].innerHTML);
                }
            };


            //为id为btn03的按钮绑定一个单击响应函数
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function () {
                //查找name=gender的所有节点
                var inputs = document.getElementsByName("gender");

                //alert(inputs.length);

                for (var i = 0; i < inputs.length; i++) {
                    /*
                     * innerHTML用于获取元素内部的HTML代码的
                     * 	对于自结束标签，这个属性没有意义
                     */
                    //alert(inputs[i].innerHTML);
                    /*
                     * 如果需要读取元素节点属性，
                     * 	直接使用 元素.属性名
                     * 		例子：元素.id 元素.name 元素.value
                     * 		注意：class属性不能采用这种方式，
                     * 			读取class属性时需要使用 元素.className
                     */
                    alert(inputs[i].className);
                }
            };

            /**
             * 查找#city下所有li节点
             * @type {HTMLElement}
             */
                //为id为btn04的按钮绑定一个单击响应函数
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {

                //获取id为city的元素
                var city = document.getElementById("city");

                //查找#city下所有li节点
                var lis = city.getElementsByTagName("li");

                for (var i = 0; i < lis.length; i++) {
                    alert(lis[i].innerHTML);
                }

            };

            /**
             * 返回#city的所有子节点
             * @type {HTMLElement}
             */
                //为id为btn05的按钮绑定一个单击响应函数
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function () {
                //获取id为city的节点
                var city = document.getElementById("city");
                //返回#city的所有子节点
                /*
                 * childNodes属性会获取包括文本节点在呢的所有节点
                 * 注意：根据DOM标签标签间空白也会当成文本节点
                 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
                 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
                 */
                var cns = city.childNodes;

                //alert(cns.length);

                /*for(var i=0 ; i<cns.length ; i++){
                    alert(cns[i]);
                }*/

                /*
                 * children属性可以获取当前元素的所有子元素（标签节点）
                 * 不包括空白
                 */
                var cns2 = city.children;
                alert(cns2.length);
            };

            /**
             * 返回#phone的第一个子节点返回#phone的第一个子节点
             * @type {HTMLElement}
             */
                //为id为btn06的按钮绑定一个单击响应函数
            var btn06 = document.getElementById("btn06");
            btn06.onclick = function () {
                //获取id为phone的元素
                var phone = document.getElementById("phone");
                //返回#phone的第一个子节点
                //phone.childNodes[0];

                //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
                var fir = phone.firstChild;
                alert(fir);

                //firstElementChild获取当前元素的第一个子元素
                /*
                 * firstElementChild不支持IE8及以下的浏览器，
                 * 	如果需要兼容他们尽量不要使用
                 */
                var fir2 = phone.firstElementChild;
                alert(fir2);
            };

            /**
             * 返回#bj的父节点
             */
            //为id为btn07的按钮绑定一个单击响应函数
            myClick("btn07", function () {

                //获取id为bj的节点
                var bj = document.getElementById("bj");

                //返回#bj的父节点，肯定是元素节点
                var pn = bj.parentNode;

                alert(pn.innerHTML);

                /*
                 * innerText
                 * 	- 该属性可以获取到元素内部的文本内容
                 * 	- 它和innerHTML类似，不同的是它会自动将html去除
                 */
                //alert(pn.innerText);
            });


            /**
             * 返回#android的前一个兄弟节点
             */
            //为id为btn08的按钮绑定一个单击响应函数
            myClick("btn08", function () {

                //获取id为android的元素
                var and = document.getElementById("android");

                //返回#android的前一个兄弟节点（也可能获取到空白的文本）
                var ps = and.previousSibling;
                alert(ps);

                //previousElementSibling获取前一个兄弟元素，IE8及以下不支持
                //var pe = and.previousElementSibling;

            });

            /**
             * 读取#username的value属性值
             */
            myClick("btn09", function () {
                //获取id为username的元素
                var um = document.getElementById("username");
                //读取um的value属性值
                //文本框的value属性值，就是文本框中填写的内容
                alert(um.value);
            });

            /**
             * 设置#username的value属性值
             */
            myClick("btn10", function () {
                //获取id为username的元素
                var um = document.getElementById("username");

                um.value = "今天天气真不错~~~";
            });


            /**
             * 返回#bj的文本值
             */
            myClick("btn11", function () {

                //获取id为bj的元素
                var bj = document.getElementById("bj");

                //获取带标签html代码
                alert(bj.innerHTML);
                //获取不带标签文本
                //	alert(bj.innerText);

                //获取bj中的文本节点
                /*var fc = bj.firstChild;
                alert(fc.nodeValue);*/
                //获取第一个子节点，文本节点可以通过nodeValue属性获取和设置
                //	alert(bj.firstChild.nodeValue);


            });

        };


    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

        <br>
        <br>

        <p>
            你喜欢哪款单机游戏?
        </p>

        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br/>
        <br/>

        <p>
            你手机的操作系统是?
        </p>

        <ul id="phone">
            <li>IOS</li>
            <li id="android">Android</li>
            <li>Windows Phone</li>
        </ul>
    </div>

    <div class="inner">
        gender:
        <input class="hello" type="radio" name="gender" value="male"/>
        Male
        <input class="hello" type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn01">查找#bj节点</button>
    </div>
    <div>
        <button id="btn02">查找所有li节点</button>
    </div>
    <div>
        <button id="btn03">查找name=gender的所有节点</button>
    </div>
    <div>
        <button id="btn04">查找#city下所有li节点</button>
    </div>
    <div>
        <button id="btn05">返回#city的所有子节点</button>
    </div>
    <div>
        <button id="btn06">返回#phone的第一个子节点</button>
    </div>
    <div>
        <button id="btn07">返回#bj的父节点</button>
    </div>
    <div>
        <button id="btn08">返回#android的前一个兄弟节点</button>
    </div>
    <div>
        <button id="btn09">返回#username的value属性值</button>
    </div>
    <div>
        <button id="btn10">设置#username的value属性值</button>
    </div>
    <div>
        <button id="btn11">返回#bj的文本值</button>
    </div>
</div>
</body>
</html>
